<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item of swiperList"
                    :key="item.id">
        <img class="swiper-img"
             :src="item.src"></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true // 自动循环轮播
      },
      swiperList: [
        {
          id: '001',
          src: '//imgs.qunarzz.com/vs_ceph_vs_tts/b294d659-bc36-4212-adcd-79490b737fb6.jpg_r_480x320x90_e5433040.jpg'
        },
        {
          id: '002',
          src: '//imgs.qunarzz.com/vs_ceph_vs_tts/b8dd228b-51dd-4537-a517-6ab32b038ea6.jpg_r_480x320x90_0a1ab7e6.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.swiper >>> .swiper-pagination-bullet-active {
  background: #fff;
}

.swiper {
  overflow: hidden; // 属性规定当内容溢出元素框时发生的事情  - hidden 内容会被修剪，并且其余内容是不可见的。
  width: 100%; // 子元素保持与父元素一样的宽度
  background: #eee;

  // height: 0;
  .swiper-img {
    width: 100%;
    height: 170px;
  }
}
</style>
